<style lang="less" scoped>
@import "./coupon.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <div style="margin:10px">
                    <p slot="title">
                        <Button type="primary" @click="alertAdd" icon="plus-round">新增优惠券</Button>
                    </p>
                    </div>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="model.show" :styles="{top: '30px'}" @on-ok="submit">
            <Form  :model="formItem" :label-width="110">
                <FormItem label="优惠券名称" prop="name">
                    <Input v-model="formItem.name" :maxlength="5" placeholder="请输入优惠券名称"></Input>
                </FormItem>
                <FormItem label="有效时间" prop="terms">
                    <Input v-model="formItem.terms" placeholder="请输入优惠券有效时间"></Input>
                </FormItem>
                <FormItem label="使用条件">
                    <Col span="8">
                        <Input v-model="formItem.condition" ><span slot="prepend">单次扣满</span><span slot="append">元</span></Input>
                    </Col>
                    <Col span="15" offset="1">
                        <Input v-model="formItem.quota" ><span slot="prepend">减</span><span slot="append">元</span></Input>
                    </Col>
                </FormItem>
                <FormItem label="会员级别">
                    <Col span="8">
                        <Input v-model="formItem.min" ><span slot="prepend">月租金</span><span slot="append">-</span></Input>
                    </Col>
                    <Col span="15" offset="1">
                        <Input v-model="formItem.max" ><span slot="prepend">-</span><span slot="append">元</span></Input>
                    </Col>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Select v-model="formItem.type">
                        <Option  :value=1 :key=1>厂房</Option>
                        <Option  :value=2 :key=2>住房</Option>
                        <Option  :value=3 :key=3>写字楼</Option>
                        <Option  :value=4 :key=4>商铺</Option>
                    </Select>
                </FormItem>
                <FormItem label="收款周期">
                    <Select v-model="formItem.payment">
                        <Option  :value=1 :key=1>7天</Option>
                        <Option  :value=2 :key=2>14天</Option>
                        <!-- <Option  :value=3 :key=3>二十一天</Option> -->
                        <Option  :value=4 :key=4>1个月</Option>
                    </Select>
                </FormItem>
                <FormItem prop="auto">
                    <Checkbox :true-value="1" :false-value="0" v-model="formItem.auto">新的订单生效后自动发放</Checkbox>
                </FormItem>
                <template v-if="formItem.auto==1">
                  <FormItem label="总发行量">
                      <Input v-model="formItem.num" ><span slot="append">张</span></Input>
                  </FormItem>
                </template>
            </Form>
        </Modal>
        <Modal v-model="tableModal.show" :style="{top: '30px'}" :width="960">
          <!-- <div slot="title"></div> -->
          <Table :columns="column" :data="data"></Table>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="pagination.count" :current="pagination.page" :page-size="pagination.size" @on-change="changePageModel" @on-page-size-change="changeSizeModel" show-elevator show-sizer show-total></Page>
          </div>
          <div slot="fotter"></div>
        </Modal>
  </div>
</template>
<script>
const resourse = "coupon";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "名称",
          key: "name",
          align: "center"
        },
        {
          title: "发布日期",
          key: "create_time",
          align: "center"
        },
        {
          title: "截止日期",
          key: "update_time",
          align: "center"
        },
        {
          title: "使用条件",
            key: "conditions",
          align: "center",
        //   render: (h, params) => {}
        },
        {
          title: "会员等级",
            key: "level",
          align: "center",
        //   render: (h, params) => {}
        },
        {
          title: "发行总量",
          key: "num",
          align: "center"
        },
        {
          title: "房屋类型",
          key: "type",
          align: "center"
        },
        {
          title: "有效期（天）",
          key: "terms",
          align: "center"
        },
        {
            title:"查看使用情况",
            align:"center",
            render:  (h, params)=> {
                return h('Button',{
                  props: {
                    type:'primary'
                  },
                  style:{
                    margin:'0 5px'
                  },
                  on:{
                    'click':()=>{
                      // console.log(params);
                      this.tableModal.show = true;
                      this.pagination.tid = params.row.tid;
                      this.getTableModel();
                    }
                  }
                },'查看')
            }
        }
      ],
      tableData: [],
      tableShow: {
        count: 0,
        page: 1,
        size: 10
      },
      created: 0.0,
      formItem: {
        condition: 0,
        max: 0,
        min: 0,
        name: "",
        num: 0,
        payment: 3,
        type: 4,
        quota: 0,
        terms: 30,
        auto: 0
      },
      model: {
        show: false
      },
      column:[
        {
          title:"序号",
          type:"index",
          align:"center"
        },
        {
          title:'用户',
          // key:
          align:'center',
          render:(h,params)=>{
            return h('Tag',{
              props:{
                color:params.row.user?'green':'yellow'
              }
            },params.row.user?params.row.user.real_name:'没有用户领取')
          }
        },
        {
          title:'使用日期',
          align:'center',
          key:'use_time',
          render:(h,params)=>{
            return h('Tag',{
              props:{
                color:params.row.use_time?'red':'green'
              }
            },params.row.use_time?params.row.use_time:'未使用')
          }
        },
        {
          title:'使用条件',
          align:'center',
          key:'conditions',
          // width:"80"
        },
        // {
        //   title:'状态',
        //   key:'status',
        //   align:'center'
        // }
      ],
      data:[],
      tableModal:{
        show:false
      },
      pagination:{
        page:1,
        size:10,
        count:0,
        tid:0
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    submit() {
      axios.post(resourse, this.formItem).then(response => {
        let res = response.data;
        if (res.code === 200) {

        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
        this.getList();
      });
    },
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    getList() {
      axios
        .get(resourse, {
          params: { page: this.tableShow.page, size: this.tableShow.size }
        })
        .then(response => {
          let res = response.data;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.tableShow.count = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    alertAdd() {
      this.model.show = true;
    },
    changePageModel(page) {
      this.pagination.page = page;
      this.getTableModel();
    },
    changeSizeModel(size) {
      this.pagination.size = size;
      this.getTableModel();
    },
    getTableModel(){
      axios.get(resourse+'/'+this.pagination.tid,{params:{page:this.pagination.page,size:this.pagination.size}}).then(response=>{
        let res = response.data;
        if(res.code === 200){
          this.data = res.data.list
          this.pagination.count = res.data.count
        }else{  
          if(res.code === 403){

          }else{
            this.$Message.error(res.msg)
          }
        }
      })
    }
  }
};
</script>

